<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>Visual Admin Dashboard - Home</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <!-- 
    Visual Admin Template
    https://templatemo.com/tm-455-visual-admin
    -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/templatemo-style.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
       <script src="js/jquery-1.11.2.min.js"></script>      <!-- jQuery -->
    <script src="js/jquery-migrate-1.2.1.min.js"></script> <!--  jQuery Migrate Plugin -->
    <!--  <script src="https://www.google.com/jsapi"></script>Google Chart -->
    <script type="text/javascript" src="js/templatemo-script.js"></script>      <!-- Templatemo Script -->

    <script>

    	var words;
    	$.ajax({
    		type:"post",
    		url:"../getwords",
    		async:true,
    		success:function(res){
    			
    			 words = JSON.parse(res);
    			 var wordshtml = "";
    			 
    			 words.forEach(function(currentValue){
    			 		wordshtml = wordshtml + "<div class=\"media-body\">";
    			 		wordshtml = wordshtml + "<h2 class=\"media-heading text-uppercase\">"+currentValue["word"]+"</h2>";
    			 		wordshtml = wordshtml + "<p>"+currentValue["mean_cn"]+"</p>";
    			 		wordshtml = wordshtml + "<div>";
    			 		
    			 });
    			 
    			 $("#words").html(wordshtml);
    			 
    			 
    			 
    		}
    	});
//  	<div class="media-body">
//                  <h2 class="media-heading text-uppercase">Consectur Fusce Enim</h2>
//                  <p>
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.  
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  Phasellus dapibus nulla quis risus auctor, non placerat augue consectetur.
//                  </p>
//                </div>        
    	
    </script>

  </head>
  <body>  
    <!-- Left column -->
    <div class="templatemo-flex-row">
      <div class="templatemo-sidebar">
        <header class="templatemo-site-header">
          <div class="square"></div>
          <h1>Visual Admin</h1>
        </header>
        <div class="profile-photo-container">
          <img src="images/profile-photo.jpg" alt="Profile Photo" class="img-responsive">  
          <div class="profile-photo-overlay"></div>
        </div>      
        <!-- Search box -->
        <form class="templatemo-search-form" role="search">
          <div class="input-group">
              <button type="submit" class="fa fa-search"></button>
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">           
          </div>
        </form>
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">          
          <ul>
            <li><a href="index.html" ><i class="fa fa-home fa-fw"></i>主页</a></li>
            <li><a href="#" class="active"><i class="fa fa-bar-chart fa-fw"></i>背单词</a></li>
            <li><a href="Ranking.html"><i class="fa fa-database fa-fw"></i>排行榜</a></li>
            <li><a href="#l"><i class="fa fa-map-marker fa-fw"></i>words</a></li>
            <li><a href="#"><i class="fa fa-users fa-fw"></i>单词记录</a></li>
            <li><a href="myinfo.html"><i class="fa fa-bar-chart fa-fw"></i>个人信息</a></li>
            <li><a href="#"><i class="fa fa-sliders fa-fw"></i>设置</a></li>
            <li><a href="#"><i class="fa fa-eject fa-fw"></i>注销</a></li>
          </ul>  
        </nav>
      </div>
      <!-- Main content --> 
      <div class="templatemo-content col-1 light-gray-bg">
       
        <div class="templatemo-content-container">
          
          <div class="templatemo-flex-row flex-content-row">
          	
            <div class="col-1 vertical">              
              <div class="templatemo-content-widget orange-bg word">
                <i class="fa fa-times"></i>                
                <div class="media" id="words">
                 
                  <div class="media-body">
                    <h2 class="media-heading text-uppercase">等待加载...</h2>
                    <p>
                    等待加载...</br>
                    等待加载...</br>
					等待加载...</br>
					等待加载...</br>
					等待加载...</br>
					等待加载...</br>
					等待加载...</br>
                    </p>
                  </div>        
                </div>                
              </div>            
              
            </div>
                   
          </div> <!-- Second row ends -->

     
        </div>
      </div>
    </div>
    
    <!-- JS -->
 
  </body>
</html>